<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Background-Position - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">background-position</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b> 
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4B2</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Color/Background Properties</b><br></td>
</tr>
<tr>
    <td><a href="color.htm">color</a><br>
        <a href="lbgcolor.htm">layer-background-color</a><br>
        <a href="lbgcolor.htm">layer-background-color</a><br>
        <a href="bg.htm">background</a><br>
        <a href="bgcolor.htm">background-color</a><br></td>
    <td><a href="bgimage.htm">background-image</a><br>
        <a href="bgrepeat.htm">background-repeat</a><br>
        <a href="bgattach.htm">background-attachment</a><br>
        <a href="bgpositx.htm">background-position-x</a><br>
        <a href="bgposity.htm">background-position-y</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">0% 0%</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>Block-level and Replaced Elements</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left valign=top><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#background-position">CSS1: Sect. 5.3.6</a><br>
        <a href="http://www.w3.org/TR/REC-CSS2/colors.html#background-properties">CSS2: Sect. 14.2.1</a>,
        <a href="http://www.w3.org/TR/CSS21/colors.html#background-properties">CSS2.1: Sect 14.2.1</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>If a 'background-image' is specified, this complex parameter details the
        initial position of the background image specified in the browser window
        if it is not continuously tiled in the display area. The values for this
        property translate to space separated X/Y coordinates of the browser
        window. Minimum values are at the upper-left corner of the display area
        and maximum values are at the lower-right corner. These values are normally
        represented as a pair, but omitting a value is legal - the missing value
        is assumed to be the y-axis coordinate and is set to the default 'center' value.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b class="s">N6</b>|<b><i class="fs">O4</i></b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">X% Y%</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4B1</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        Percentage is in reference to the dimensions of the box of the current
        element. Values specify the percentages on BOTH the image and the canvas
        and may be negative (eg: 20% 75% indicates the reference point 20% from
        the left side of the image, 75% from the top of the image is to be located
        at 20% from the left side of the element's rendering box and 75% from the
        top of the rendering box).</dd>

<dt><b class="subheading">X Y</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4B1</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        Represents absolute coordinate position of the image and may be negative.
        Standard <a href="../../syntax/units/abslength.htm">Absolute</a> or
        <a href="../../syntax/units/rellength.htm">Relative</a> Length Units
        may be used here.</dd>

<dt><b class="subheading">[(left|center|right) (top|center|bottom)]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4B1</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Keywords representing screen positions. Left keyword is the X-position and
        the right keyword is the Y-position for the image.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">body</b> {
        <span class="property">background-image:</span>
        url(http://www.foo.com/image.gif);<br>
        <span class="property">background-position:</span> center top }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">body</b> <span
        class="tagattrib">STYLE</span>=&quot;<span class="property">background-image:</span>
        url(http://www.foo.com/image.gif);<br>
        <span class="property">background-position:</span>
        center top&quot;&gt;text&lt;/<b class="tagname">body</b>&gt;</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li>CSS2 states that [Length] and [Percentage] values can be mixed together,
        but these should not be mixed with position keywords. CSS2.1 reverses 
        this decision - it is now legal to say "50px bottom".
    <li>The order of the position keywords is not important (eg: "right bottom"
        is treated the same as "bottom right").
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li>Nothing to report.
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>